<template>
  <div class="XTFLGL">
    <el-card class="box-card _body">
      <div slot="header" class="clearfix">
        <span style="font-weight: 700; font-size: 20px">系统分类管理</span>
      </div>
      <div class="query">
        <!-- 标题
        <el-input size="small" style="width:200px"></el-input>
        系统
        <el-select
          size="small"
          v-model="query.filter.status"
          placeholder="请选择"
        >
          <el-option label="已处理" :value="0"> </el-option>
          <el-option label="待处理" :value="1"> </el-option>
        </el-select>
        关键词
        <el-input size="small" style="width:200px"></el-input>
        <el-button
          size="small"
          icon="el-icon-search"
          style="margin-left: 10px"
          type="primary"
          @click="getTabList(true)"
        ></el-button> -->
        <el-button
          size="small"
          icon="el-icon-plus"
          type="success"
          style="margin-left: 10px"
          @click="dialogVisible = true"
        ></el-button>
      </div>
      <div class="main" style="margin-top: 10px">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          border
          height="555"
          v-loading="isLoading"
        >
          <el-table-column prop="orderIndex" label="排序"> </el-table-column>
          <el-table-column prop="name" label="系统名称"> </el-table-column>
          <el-table-column prop="createdByName" label="创建人">
          </el-table-column>
          <el-table-column prop="createdTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="updatedByName" label="创建人">
          </el-table-column>
          <el-table-column prop="updatedTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="isDeleted" label="是否删除"
            ><template slot-scope="scope">{{
              scope.row.isDeleted ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column prop="isDisabled" label="是否禁用">
            <template slot-scope="scope">{{
              scope.row.isDisabled ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column prop="name" label="选项" width="140" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="edit(scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-delete"
                @click="del(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page" style="text-align: right">
        <span style="float: left">总共 {{ total }} 条记录</span>
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="query.currentPage"
          :page-size="query.pageSize"
          :total="total"
          @current-change="page_change"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹层 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="902px"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="height: 500px; overflow: auto; padding-bottom: 5px">
        <el-form
          label-position="right"
          label-width="110px"
          :model="formLabelAlign"
        >
          <el-form-item
            label="系统名称"
            style="display: inline-block; width: 50%"
          >
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="排序" style="display: inline-block; width: 50%">
            <el-input v-model="formLabelAlign.orderIndex"></el-input>
          </el-form-item>
          <el-form-item
            label="是否禁用"
            style="display: inline-block; width: 33%"
          >
            <el-switch
              v-model="formLabelAlign.isDisabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item
            label="是否删除"
            style="display: inline-block; width: 33%"
          >
            <el-switch
              v-model="formLabelAlign.isDeleted"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import testVidio from "@/assets/testVidio.mp4";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  data() {
    return {
      query: {
        currentPage: 1,
        pageSize: 16,
        filter: {
          type: 0,
        },
      },
      total: 0,
      tableData: [],
      title: "添加",
      dialogVisible: false,
      formLabelAlign: {
        isDeleted: false,
        isDisabled: false,
      },
      isLoading: false,
    };
  },
  components: {
    quillEditor,
  },
  mounted() {
    this.getTabList();
  },
  methods: {
    getTabList(flag) {
      if (flag) {
        this.query.currentPage = 1;
      }
      this.isLoading = true;
      this.$post(
        baseUrl.bzIp + "/T1/api/v1/HelpCenter/HcSystem/GetList",
        this.query
      ).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.isLoading = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.formLabelAlign = {
        isRequire: false,
        type: 0,
      };
      this.title = "添加";
    },
    btnOK() {
      if (!this.formLabelAlign.id) {
        this.$post(
          baseUrl.bzIp + "/T1/api/v1/HelpCenter/HcSystem/Create",
          this.formLabelAlign
        ).then((res) => {
          if (res.code != 200) {
            this.$message.erroe(res.message);
            return;
          }
          this.getTabList();
          this.handleClose();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        });
      } else {
        this.$put(
          baseUrl.bzIp + "/T1/api/v1/HelpCenter/HcSystem/Update",
          this.formLabelAlign
        ).then((res) => {
          if (res.code != 200) {
            this.$message.error(res.message);
            return;
          }
          this.getTabList();
          this.handleClose();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        });
      }
    },
    edit(val) {
      var init = JSON.stringify(val);
      this.formLabelAlign = JSON.parse(init);
      this.title = "修改";
      this.dialogVisible = true;
    },
    del(id) {
      this.$deleteF(
        baseUrl.bzIp + "/T1/api/v1/HelpCenter/HcSystem/Delete?id=" + id
      ).then((res) => {
        if (res.code != 200) {
          this.$message.error(res.message);
          return;
        }
        this.getTabList();
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    page_change(val) {
      this.query.currentPage = val;
      this.getTabList();
    },
    // 上传
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1
      ) {
        // layer.msg("请上传正确的视频格式");
        this.$message({
          message: "请上传正确的视频格式",
          type: "warning",
        });
        return false;
      }
      if (!fileSize) {
        // layer.msg("视频大小不能超过50MB");
        this.$message({
          message: "视频大小不能超过50MB",
          type: "warning",
        });
        return false;
      }
      this.isShowUploadVideo = false;
      this.Vidio = {
        title: file.name,
        time: file.lastModifiedDate,
        size: Math.round(file.size / 1024 / 1024) + "MB",
      };
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;

      //后台上传地址
      if (res.Code == 0) {
        this.videoForm.showVideoPath = res.Data;
      } else {
        // layer.msg(res.Message);
      }
    },
    onEditorChange({ quill, html, text }) {
      console.log(html);
      this.content_html = html;
      console.log(this.content_html);
    },
  },
};
</script>

<style scoped>
.XTFLGL {
  padding: 10px;
}
._body {
  height: 90vh;
}
input[type="file"] {
  display: none;
}
.pic_img_box {
  width: 700px;
  height: 300px;
  border: 1px solid #000;
  text-align: center;
  line-height: 300px;
  font-size: 100px;
}
</style>
